<template>
	<div>
		<div class="login-header">
			<div class="login-width">
				<a class="login-header-logo"></a>
				<span class="login-header-title">卖家一键选货中心</span>
			</div>
		</div>
		<div class="login-main">
			<!-- <div class="login-text"></div> -->
			<div class="login-form" id="login_form">
				<div class="login-form-title">账号登录</div>
				<div class="login-input">
					<div class="login-form-icon login-username"></div>
					<div>
						<input type="text" placeholder="用户名" v-model="username" />
					</div>
				</div>
				<div class="login-input">
					<div class="login-form-icon login-pw"></div>
					<div>
						<input type="password" placeholder="密码" v-model="password" />
					</div>
				</div>
				<div class="login-submit" @click="login">登录</div>
				<div class="login-tel">商务联系：13524962024</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {encryInfo, login} from '../config/interface.js'
	import '../util/md5.min.js'
	import {toast} from '../util/tool.js'
	import {fetch} from '../config/fetch.js'
	import {mapActions} from 'vuex'
	import router from '../router/index.js'

	export default{
		data(){
			return{
				username: '',
				password: ''
			}
		},
		methods: {
			...mapActions({ setUserInfo: 'setUserInfo' }),
			login(){
				if(this.username.length == 0){
					var str = "请输入用户名";
					toast(str, 2, false);
					return;
				}
				if(this.password.length == 0){
					var str = "请输入密码";
					toast(str, 2, false);
					return;
				}
				var pw = md5(this.password + encryInfo);
				var data = {
					'account': this.username,
					'password': pw
				};
				var url = login;
				fetch(url, data)
				.then(res => {
                    if(res.code == 10000){
                    	this.setUserInfo(res.data);
                    	router.push('/index/home');
                    }else{
                    	var str = "登录失败";
						toast(str, 2, false);
                    }
                });
			}
		}
	}
</script>